<template>
  <div class="tabbar">
    <router-link
    tag="div"
    class="tabbar-item"
    v-for="link of links"
    :key='link.name'
    :to='{name: link.name}'
    >
    <span class="icon" v-html='link.icon'></span>
    <span class="title">{{link.title}}</span>
    <mt-badge
      class="tabbar-item-badge"
      size="small"
      type="error"
      v-if="link.name === 'cart'"
    >
      {{totalAmount}}
    </mt-badge>
    </router-link>
  </div>
</template>

<script>
import routes from '@/router/routes'
import {
  mapGetters
} from 'vuex'
export default {
  name: 'Tabbar',
  data () {
    return {
      links: routes.filter(route => route.isNav === true)
    }
  },
  computed: {
    ...mapGetters(['totalAmount'])
  }
}
</script>

<style lang='scss' scoped>
@font-face {
  font-family: 'iconfont';  /* project id 922798 */
  src: url('//at.alicdn.com/t/font_922798_g3430kn6csm.eot');
  src: url('//at.alicdn.com/t/font_922798_g3430kn6csm.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_922798_g3430kn6csm.woff') format('woff'),
  url('//at.alicdn.com/t/font_922798_g3430kn6csm.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_922798_g3430kn6csm.svg#iconfont') format('svg');
}
  .tabbar {
    display: flex;
    &-item active{
      display:none
    }
    &-item{
      flex: 1;
      text-align: center;

      .icon{
        height: 32px;
        display: block;
        font-family: 'iconfont';
        font-size: 20px;
        line-height: 32px;
      }

      .title{
        line-height: 16px;
        font-size: 12px;
      }

      &.router-link-exact-active,
      &.router-link-active {
        color: red;
      }
    }
  }
</style>

<style lang="scss">

  .tabbar-item {
    position: relative;

    &-badge {
      position: absolute;
      top: 0px;
      left: 50px;
    }
  }
</style>
